<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:url value="/" var="baseUrl" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" href="${baseUrl}layui/css/layui.css"  media="all">
<title>山东电信宽带异常分析助手</title>
<%@include file="../include/css.jsp"%>
 <script language="javascript" type="text/javascript">
function cow(){
var op= document.getElementById("select").value;
window.alert(op);
}
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>  
    <script type="text/javascript" src="${baseUrl}layer-v3.0.3/layer/layer.js"></script> 
  <script type="text/javascript">  
        ;!function(){  
            layer.config({//加载扩展模块  
                extend: 'extend/layer.ext.js'  
            });  
            layer.ready(function(){   
            });  
        }();  
          
        function ityzl_SHOW_LOAD_LAYER(){  
            return layer.msg('努力计算中，请稍候...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '430px', time:100000}) ;  
        }  
        function ityzl_CLOSE_LOAD_LAYER(index){  
            layer.close(index);  
        }  
        function ityzl_SHOW_TIP_LAYER(){  
            layer.msg('恭喜您，加载完成！',{time: 1000,offset: '10px'});  
        }  
    </script>  
 <script type="text/javascript">  
$(function(){ 
	$("#pageJumpButton").hide();
    $("#btnRequest").bind("click", function () {  
        var i ;
        var date=$('#years').val()+$('#date').val();
       
        $.ajax({  
            type: "post",  
            dataType: "json", 
            data:"date="+date,
            url: "${baseUrl}front/JsonListTop10",  
            beforeSend: function () {  
                i = ityzl_SHOW_LOAD_LAYER();  
            },  
            success: function (data) {  
                ityzl_CLOSE_LOAD_LAYER(i);
                
                
                jsonData = data;
                pn = 1;
                totalCount = 10;
                
                pageSize = 10;
                pageTotal = 1;
                
                $("#total-page").text(pageTotal);
                
                $("#next").click(function() {
                  if (pn == pageTotal) {
                    pn = pageTotal;
                  } else {
                    pn++;
                    gotoPage();
                  }
                });
                $("#prev").click(function() {
                  if (pn == 1) {
                    pn = 1;
                  } else {
                    pn--;
                    gotoPage();
                  }
                });
                $("#firstPage").click(function() {
                  pn = 1;
                  gotoPage();
                });
                $("#lastPage").click(function() {
                  pn = pageTotal;
                  gotoPage();
                });
                $("#firstPage").trigger("click");
                
                
                ityzl_SHOW_TIP_LAYER(); 
            },  
            error: function (e, jqxhr, settings, exception) {  
                ityzl_CLOSE_LOAD_LAYER(i);  
            }  
        });  
    });  
});  

function gotoPage() {
	  $("#current-page").text(pn);
	  
	  var startPage = pageSize * (pn - 1);
      var endPage = startPage + pageSize - 1;
      var subjects = jsonData.subjects;
      var $tb1 = $("#top101");
      $tb1.empty();
      var $tb = $("#table-json1");
      $tb.empty();
      $tb1.append("AAA系统数据异常 top10");
      if(subjects!=1){
    	  
		  
    	  
    	  $tb.append("<tr><th>地市</th><th>账号</th><th>累计在线天数</th><th><font color='red'>下行日均流量(GB)</font></th></tr>");
      for (var i = 0; i < pageSize; i++) {
        $tb.append('<tr class="tr-tag"></tr>');
      }
      
      
      
    	      $("#pageJumpButton").hide();
          for (var j = 0; j < totalCount; j++) {
              $(".tr-tag").eq(j)
              .append("<td>" + subjects[j].city + "</td>")
              .append("<td>" + subjects[j].account + "</td>")
              .append("<td>" + subjects[j].days + "</td>")
              .append("<td>" + subjects[j].avgFlow + "</td>"); 
          }
      
      }
      var $tb22 = $("#top102");
      $tb22.empty();
      var $tb2 = $("#table-json2");
      $tb2.empty();
      var subjects1 = jsonData.subjects1;
      $tb22.append("SIG系统数据异常 top10");
      if(subjects1!=1){
    	 
      $tb2.append("<tr><th>地市</th><th>账号</th><th><font color='#FF0000'>当月最大累计主机数</font></th><th><font color='#FF0000'>当月最大并发主机数</font></th></tr>");
      
      for (var i = 0; i < pageSize; i++) {
        $tb2.append('<tr class="tr-tag2"></tr>');
      }
      
      
	      $("#pageJumpButton").hide();
      for (var j = 0; j < totalCount; j++) {
          $(".tr-tag2").eq(j)
          .append("<td>" + subjects1[j].city + "</td>")
          .append("<td>" + subjects1[j].account + "</td>")
          .append("<td>" + subjects1[j].maxSumHostOfMonth + "</td>")
          .append("<td>" + subjects1[j].maxHostOfMonth + "</td>"); 
      }
      }
      var $tb33 = $("#top103");
      $tb33.empty();
      var $tb3 = $("#table-json3");
      $tb3.empty();
      var subjects2 = jsonData.subjects2;
      $tb33.append("BAS系统数据异常 top10");
      if(subjects2!=1){
    	  
      $tb3.append("<tr><th>城市</th><th>BAS IP</th><th><font color='#FF0000'>相似MAC</font></th><th>相似MAC数量</th></tr>");
      
      for (var i = 0; i < pageSize; i++) {
        $tb3.append('<tr class="tr-tag3"></tr>');
      }
      
      
	      $("#pageJumpButton").hide();
      for (var j = 0; j < totalCount; j++) {
          $(".tr-tag3").eq(j)
          .append("<td>" + subjects2[j].city + "</td>")
          .append("<td>" + subjects2[j].basIp + "</td>")
          .append("<td>" + subjects2[j].mac + "</td>")
          .append("<td>" + subjects2[j].count + "</td>")
          .append("<td>" + " <a href='ListAccountOfSameMac?basIp="+subjects2[j].basIp+"&leftMac="+subjects2[j].mac +"'>查看明细</a></td>");
          
      }
      }
      
}


</script> 
<script type="text/javascript">
function addParam()
{
  var objA=document.getElementById("a1");
  objA.href="ExportTop10?date="+$('#years').val()+$('#date').val();
		  
}
</script>

  </head>

  <body>
 
	
  <!-- container section start -->
  <section id="container" class="">
     <%@include file="../include/header.jsp"%>
		<%@include file="../include/sidebar.jsp"%>
               
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">            
              <!--overview start-->
			     
            
              
            <!--/.row--><!-- Today status end --><!-- statics end -->
              <!--主显示区域--开始-->
              <form action="${baseUrl}front/ListSumSigBasAAA" method="post">
		<div align="center" >
		<label >请选择分析的月份 ：</label>
    
   <select class="easyui-combobox" id="years" name="select" panelHeight="auto" style="    width:60px; padding-top:5px; margin-top:10px;">
<option value="2016">2016</option> 
<option value="2017" selected="selected">2017</option> 
<option value="2018">2018</option> 
  </select>年
  <select class="easyui-combobox" id="date" name="date"  panelHeight="auto" style="    width:40px; padding-top:5px; margin-top:10px;">
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
<option value="05">05</option> 
<option value="06">06</option> 
<option value="07">07</option>
<option value="08" selected="selected">08</option> 
<option value="09">09</option>
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option>   
  </select>月 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="button" class="layui-btn layui-btn-normal" id="btnRequest" value="开始分析" name="find">
  <div style="display: inline-block">
			    <a id="a1" href="" onclick="addParam()">[导出明细]</a>
		    </div>
  
</div>

    <div id="mainContent">
	    <header class="panel-heading">
		    <div id="top101"; style="display: inline-block; width: 90%; text-align: center"></div>
		    
	    </header>
		<table class="table table-striped table-advance table-hover">
			<tbody id="table-json1">
			
			</tbody>
		</table>
		</div>
		<div id="mainContent">
	    <header class="panel-heading">
		    <div id="top102"; style="display: inline-block; width: 90%; text-align: center"></div>
		    
	    </header>
		<table class="table table-striped table-advance table-hover">
			<tbody id="table-json2">
			
			</tbody>
		</table>
		</div>
		<div id="mainContent">
	    <header class="panel-heading">
		    <div id="top103"; style="display: inline-block; width: 90%; text-align: center"></div>
		    
	    </header>
		<table class="table table-striped table-advance table-hover">
			<tbody id="table-json3">
			
			</tbody>
		</table>
		</div>
		<div align="center" id="pageJumpButton">
          <button type="button" id="firstPage">首页</button>
          <button type="button" id="prev">上一页</button>
	      第<span id="current-page">1</span>页&nbsp;
	      共<span id="total-page">0</span>页
	      <button type="button" id="next">下一页</button>
	      <button type="button" id="lastPage">尾页</button>
	    </div>
	
	</form>


			  <!--主显示区域--结束-->
          </section>
      </section>
      <!--main content end-->
  </section>
  <!-- container section start -->

   <%@include file="../include/scripts.jsp"%>
<script>
$("#sidebarMyChart").removeClass('active');
$("#sidebarListSameMac").removeClass('active');
$("#sidebarListAvgFlow").removeClass('active');
$("#sidebarScatter").removeClass('active');
$("#sidebarListSigData").removeClass('active');
$("#sidebarListTop10").addClass('active');
$("#sidebarListAccount").removeClass('active');
$("#sidebarBWListAdmin").removeClass('active');
$("#sidebarListDoc").removeClass('active');
$("#sidebarListUser").removeClass('active');
</script>
  </body>
</html>

